import React, { Component } from "react";
import { topSongs } from "../../api/songs";
import { formatDuration } from "../../utils/format";
import bus from "../../utils/bus";
export default class Songs extends Component {
  constructor(props) {
    super();
    this.state = {
      // 选中的类别的索引
      selectIndex: 0,
      // 类别数组
      types: [
        { type: 0, name: "全部" },
        { type: 7, name: "华语" },
        { type: 96, name: "欧美" },
        { type: 8, name: "日本" },
        { type: 16, name: "韩国" },
      ],
      tableData: [],
    };
  }
  componentDidMount() {
    this.loadSong();
  }
  async loadSong() {
    const { selectIndex, types } = this.state;
    const res = await topSongs({
      type: types[selectIndex].type,
    });
    const { code, data } = res.data;
    if (code === 200) {
      this.setState({
        tableData: data.map((v) => {
          return {
            id: v.id,
            album: {
              picUrl: v.album.picUrl,
              name: v.album.name,
            },
            name: v.name,
            mvid: v.mvid,
            subTitle: v.subTitle,
            artists: [{ name: v.artists[0].name }],
            duration: v.duration,
          };
        }),
      });
    }
  }
  renderTab = () => {
    const { types, selectIndex } = this.state;
    return (
      <div className="tab-bar">
        {types.map((v, i) => {
          return (
            <span
              className={i === selectIndex ? "item active" : "item"}
              key={v.type}
              onClick={() => this.changeType(i)}
            >
              {v.name}
            </span>
          );
        })}
      </div>
    );
  };
  renderTable = () => {
    const { tableData } = this.state;
    return <table className="el-table playlit-table"></table>;
  };
  changeType = (i) => {
    this.setState(
      {
        selectIndex: i,
      },
      () => {
        this.loadSong();
      }
    );
  };
  render() {
    return (
      <div className="songs-container">
        {this.renderTab()}
        {this.renderTable()}
      </div>
    );
  }
}
